<!doctype html>



  


<html class="theme-next mist use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Blog," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />






<meta name="description" content="说明：介绍建立个人blog站点的主要流程，使用github pages以及hexo进行实现。">
<meta name="keywords" content="Blog">
<meta property="og:type" content="article">
<meta property="og:title" content="搭建个人博客站点(1)-托管到github pages">
<meta property="og:url" content="http://bebetter.site/2016/08/08/Blog/搭建个人博客站点1-托管到github pages/index.html">
<meta property="og:site_name" content="gatewayzy">
<meta property="og:description" content="说明：介绍建立个人blog站点的主要流程，使用github pages以及hexo进行实现。">
<meta property="og:updated_time" content="2016-08-08T12:21:42.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="搭建个人博客站点(1)-托管到github pages">
<meta name="twitter:description" content="说明：介绍建立个人blog站点的主要流程，使用github pages以及hexo进行实现。">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Mist',
    sidebar: {"position":"right","display":"always"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 0,
      author: '博主'
    }
  };
</script>




  <link rel="canonical" href="http://bebetter.site/2016/08/08/Blog/搭建个人博客站点1-托管到github pages/"/>

  <title> 搭建个人博客站点(1)-托管到github pages | gatewayzy </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">gatewayzy</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">blog of gatewayzy</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                搭建个人博客站点(1)-托管到github pages
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-08T20:21:04+08:00" content="2016-08-08">
              2016-08-08
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Blog/" itemprop="url" rel="index">
                    <span itemprop="name">Blog</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><strong>说明：</strong>介绍建立个人blog站点的主要流程，使用github pages以及hexo进行实现。<br><a id="more"></a></p>
<h2 id="为什么建站"><a href="#为什么建站" class="headerlink" title="为什么建站"></a>为什么建站</h2><hr>
<ul>
<li><p><strong>写博客的好处</strong><br>写博客可以总结知识，加深理解，相互交流…</p>
</li>
<li><p><strong>写博客方法</strong><br>使用CSDN、OSChina等网站写博客.<br>搭建个人博客站点…    </p>
</li>
<li><p><strong>个人原因</strong><br>记笔记不喜欢用云笔记.<br>各方前辈们的影响.<br>偏好搭建个人网站…  </p>
</li>
</ul>
<h2 id="搭建博客站点主要流程"><a href="#搭建博客站点主要流程" class="headerlink" title="搭建博客站点主要流程"></a>搭建博客站点主要流程</h2><hr>
<p>搭建博客要素：域名、服务器、域名解析、blog工程、工程发布到服务器。如果不需要设置个人域名，可以忽略域名、域名解析的工作。</p>
<h3 id="域名"><a href="#域名" class="headerlink" title="域名"></a>域名</h3><hr>
<ul>
<li>访问网站的时候，好的域名容易记住。</li>
<li>可以在阿里云、godaddy等网站租用域名，域名花费不多。</li>
</ul>
<h3 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h3><hr>
<ul>
<li>服务器用来发布blog站点，服务器可以使用ECS、VPS等服务。  </li>
<li>云服务器ECS(Elastic Compute Service)基于Border Gateway Protocol (BGP)边界网关协议，提供可弹性伸缩的计算服务器。常用的有阿里云、亚马逊AWS等。  </li>
<li>虚拟专用服务器VPS(Virtual Private Server)将服务器分成多个虚拟专享服务器，基于容器技术和虚拟化技术。常用的有搬瓦工、linode、vultr等。  </li>
<li>ECS和VPS一般能够提供独立的IPV4或者域名，价格也高低不一。</li>
</ul>
<h3 id="域名解析"><a href="#域名解析" class="headerlink" title="域名解析"></a>域名解析</h3><hr>
<ul>
<li>域名要解析到服务器，可以是IP解析，也可以是CNAME解析等，域名解析服务需要服务商。</li>
<li>常用的域名解析有阿里云、DNSPod、godaddy等。普通服务基本免费。</li>
</ul>
<h3 id="创建blog站点工程"><a href="#创建blog站点工程" class="headerlink" title="创建blog站点工程"></a>创建blog站点工程</h3><hr>
<ul>
<li>创建一个web工程用于发布blog，可以使用WordPress、hexo等工具架构。</li>
<li>个人blog站点应尽量少使用图片等网络开销较大的资源，尽量使用文字描述。</li>
<li>真正需要发布大量图片、flash等资源的话，可以租用CDN服务（Content Delivery Network，内容分发网络）。</li>
</ul>
<h3 id="发布blog"><a href="#发布blog" class="headerlink" title="发布blog"></a>发布blog</h3><hr>
<ul>
<li>将站点代码发送到服务器并发布，即可访问相应的网站查看blog。</li>
</ul>
<h2 id="开始建站"><a href="#开始建站" class="headerlink" title="开始建站"></a>开始建站</h2><hr>
<p><em>为方便描述，本文使用了一些个人的用户名、域名等变量，请注意替换。</em></p>
<h3 id="域名与域名解析"><a href="#域名与域名解析" class="headerlink" title="域名与域名解析"></a>域名与域名解析</h3><hr>
<ul>
<li>我从阿里云租用了bebetter.site，注册了DNSPod进行域名解析，服务器站点采用github提供的个人站点。</li>
<li>由于github通过github pages服务向每个用户免费提供了一个个人站点，并且有二级域名，所以没有单独租服务器。</li>
<li>下面开始写博客工程。</li>
</ul>
<h2 id="github-github-pages-写博客"><a href="#github-github-pages-写博客" class="headerlink" title="github + github pages 写博客"></a>github + github pages 写博客</h2><hr>
<h3 id="创建github博客站点"><a href="#创建github博客站点" class="headerlink" title="创建github博客站点"></a>创建github博客站点</h3><hr>
<p>参考文章：<a href="http://blog.csdn.net/renfufei/article/details/37725057/" target="_blank" rel="external">创建GitHub技术博客全攻略</a></p>
<p>Github允许每个账号拥有一个基于github pages的user page站点，可以作为静态博客站点。个人站点的配置方法如下：</p>
<ol>
<li>新建repo，取名必须为账户名，如我的是gatewayzy，github会自动识别</li>
<li>在该repo中设置启用github page（Settings-GitHub Pages#page generator），并发布，username.github.io就是个人的站点，可以打开并查看</li>
<li>这个repo就是一个静态站点，可以增改删里面的文件，做出想要的网站效果。接下来是设置个人域名。</li>
<li>将此站点与租用的域名映射：在repo根目录中添加文件“CNAME”，输入域名，如bebetter.site，不要写www等前缀。设置CNAME的作用体现在：当访问username.github.io的时候，将会跳转到CNAME域名。</li>
<li>使用DNSPod进行解析，为bebetter.site添加解析如下。</li>
</ol>
<table>
<thead>
<tr>
<th style="text-align:center">主机记录</th>
<th style="text-align:center">记录类型</th>
<th style="text-align:center">记录值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">@</td>
<td style="text-align:center">CNAME</td>
<td style="text-align:center">gatewayzy.github.io</td>
</tr>
<tr>
<td style="text-align:center">www</td>
<td style="text-align:center">CNAME</td>
<td style="text-align:center">gatewayzy.github.io</td>
</tr>
</tbody>
</table>
<p><em>主机记录@表示xxx.bebetter.site都解析为这一行的记录值，CNAME表示记录值是域名而非IP等。<br> 主机记录www表示www.bebetter.site解析为这一行的记录值。其他的主机类型和记录类型等就不详述了。<br> 设置域名解析的作用体现在：当访问添加的域名的时候，将会访问对应的记录值的域名。域名解析发生循环是可控的，不用担心。</em></p>
<p>通过CNAME和域名解析设置，可以在访问gatewayzy.github.io和bebetter.site时都会访问gatewayzy.github.io网站，但是域名显示是bebetter.site。<br>由于我都是使用github的私人主页作为博客站点，只存在博客站点的开发上的区别，所以域名解析都是一样的。<br>如果是使用VPS或者ECS的话，应该会有独立的IP或者一个域名，域名解析的步骤相同，具体参数设置可以搜一下。</p>
<h3 id="更新博客"><a href="#更新博客" class="headerlink" title="更新博客"></a>更新博客</h3><hr>
<p>后期更新本质就是就是更新一个github项目。repo里面的index.html就是博客首页。<br>可以使用在线编辑，进行增改删文件。不便之处在于：网速问题、发布预览麻烦等。<br>可以将项目下载到本地进行建站工作，使用tomcat、Apache等进行预览，完成后使用git上传。可能问题是相对路径。  </p>
<h2 id="github-hexo-写博客"><a href="#github-hexo-写博客" class="headerlink" title="github + hexo 写博客"></a>github + hexo 写博客</h2><hr>
<p>上面更新博客的方法原始又太麻烦，可以一些博客框架工具，如jelly、hexo。这里我们使用hexo管理之前建好的github个人网站。<br>hexo支持markdown语法，提供主题封装、网站预览、项目发布等功能。<br>使用hexo建站的步骤包括：安装hexo、创建本地的github个人博客、使用hexo对github上的个人博客进行覆盖更新。</p>
<h3 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h3><hr>
<ul>
<li><a href="http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html" target="_blank" rel="external">windows 下安装nodejs</a></li>
<li><a href="http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html" target="_blank" rel="external">史上最详细“截图”搭建Hexo博客并部署到Github</a></li>
<li><a href="http://www.jianshu.com/p/465830080ea9" target="_blank" rel="external">HEXO+Github,搭建属于自己的博客</a></li>
<li><a href="http://chitanda.me/2015/06/11/tips-for-setup-hexo/" target="_blank" rel="external">hexo博客搭建时遇到的一些问题</a></li>
</ul>
<h3 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h3><hr>
<ul>
<li>安装windows版Nodejs，在CMD测试node和npm命令查看安装。</li>
<li>在Git bash中运行npm install -g hexo以安装hexo，-g表示global全局安装。运行hexo查看安装。</li>
<li>在一个文件夹打开git bash，运行hexo init来下载hexo示例的git项目。</li>
<li>运行hexo generate进行项目编译，运行hexo server发布项目预览。访问localhost:4000查看站点。</li>
</ul>
<h3 id="使用hexo建站"><a href="#使用hexo建站" class="headerlink" title="使用hexo建站"></a>使用hexo建站</h3><hr>
<ul>
<li>设置hexo发布项目到github。<br>  修改工程下的_config.yml文件，添加发布到github的地址和分支。再运行下面一行命令安装项目发布插件hexo-deployer-git。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line">  <span class="built_in">type</span>: git</div><div class="line">  repository: https://github.com/gatewayzy/gatewayzy.github.io.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-deployer-git –-save</div></pre></td></tr></table></figure>
<ul>
<li>运行hexo generate生成静态页面到public目录，运行hexo deploy将项目发布到github私人博客中。访问私人博客站点即可。</li>
<li>注意deploy会覆盖之前的github个人博客中原有的文件，所以建议先将repo中的项目备份，等完全理解了hexo的发布机制再运行deploy，否则会丢失一些配置文件。</li>
<li>为了进一步理解和编辑个人站点，需要对hexo的站点管理机制进一步的说明。</li>
</ul>
<h3 id="hexo工程目录结构"><a href="#hexo工程目录结构" class="headerlink" title="hexo工程目录结构"></a>hexo工程目录结构</h3><hr>
<ul>
<li>node_modules 存放hexo程序模块。</li>
<li>public 存放发布的站点文件，包括主页index.html、js、css、所有html、归类的html等。</li>
<li>scaffolds 存放md模板，包括draft.md、page.md、post.md，在hexo new post操作生成的post将使用post.md的内容，依次类推，可以自定义模板。</li>
<li>source 存放博客的md源文件，不同的draft、post等存放在对应的_drafts, _posts等目录下，在hexo generate的时候，所有的md源文件生成详细的html，所有的html都会依据hexo主题样式生成目录放到index.html中，然后可以链接查看每一篇详细的html。</li>
</ul>
<p><em>按需拷贝到source下的配置有：CNAME（用于域名解析）、favicon.ico（站点icon）、LICENSE（开源协议）、params.json（站点生成page的配置）、.gitignore（好像hexo自动忽略该文件）、README.md（项目readme）。<br>    配置文件等应该放到source中而不是public中，因为hexo clean会删除所有的public文件。</em></p>
<ul>
<li>themes 存放hexo的主题样式，每个主题样式都有readme对主题的配置升级等操作进行了说明。</li>
<li>_config.yml 站点配置文件，包括网站开发人员信息、插件、主题等重要配置。</li>
</ul>
<h3 id="hexo-命令解析"><a href="#hexo-命令解析" class="headerlink" title="hexo 命令解析"></a>hexo 命令解析</h3><hr>
<ul>
<li>创建新文章，如下命令将会在source/_posts目录下创建相应的”ahexo.md”。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo new “ahexo” 	<span class="comment">#创建新文章，默认是post，如果是page、draft需指明</span></div></pre></td></tr></table></figure>
<ul>
<li>编辑ahexo.md，使用markdown语法即可。</li>
<li>生成静态页面，将会在public目录下生成html。在public目录下的index.html将会是博客站点的主页，里面包含所有hexo文章的摘要，具体内容和样式将根据hexo的主题样式生成。Public目录下还有hexo主题所用的css、js、2016等文件，其中2016等时间文件中存放的是各个详细的博客文章html。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo generate	<span class="comment">#生成静态页面</span></div></pre></td></tr></table></figure>
<ul>
<li>发布项目到github个人站点，将public文件内容上传到github 个人仓库中。特定的配置可以放在source目录下，generate会自动放到public中。如果运行下面的程序提示未找到git命令，可能需要npm安装插件 <code>npm install hexo-deployer-git --save</code>。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo deploy	<span class="comment">#发布项目到github个人站点</span></div></pre></td></tr></table></figure>
<h3 id="hexo常用命令"><a href="#hexo常用命令" class="headerlink" title="hexo常用命令"></a>hexo常用命令</h3><hr>
<p>hexo部分常用命令如下。由于默认hexo不发布草稿，所以草稿类似于“私密文章”，查看草稿需强制发布草稿，且<code>hexo d</code>不会上传草稿到github。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">npm install hexo -g <span class="comment">#安装 –g表示全局global   </span></div><div class="line">npm update hexo -g <span class="comment">#升级    </span></div><div class="line">hexo init <span class="comment">#初始化  </span></div><div class="line">hexo n <span class="string">"我的博客"</span> == hexo new <span class="string">"我的博客"</span> <span class="comment">#新建文章  </span></div><div class="line">hexo p == hexo publish  </div><div class="line">hexo g == hexo generate<span class="comment">#生成  </span></div><div class="line">hexo s == hexo server <span class="comment">#启动服务预览  </span></div><div class="line">hexo d == hexo deploy<span class="comment">#部署  </span></div><div class="line">hexo server <span class="comment">#Hexo 会监视文件变动并自动更新，您无须重启服务器。  </span></div><div class="line">hexo server -s <span class="comment">#静态模式  </span></div><div class="line">hexo server -p 5000 <span class="comment">#更改端口  </span></div><div class="line">hexo server -i 192.168.1.1 <span class="comment">#自定义 IP  </span></div><div class="line">hexo clean <span class="comment">#清除缓存 网页正常情况下可以忽略此条命令  </span></div><div class="line">hexo generate --watch <span class="comment">#监视文件变动  </span></div><div class="line">hexo generate –deploy <span class="comment">#完成后部署 </span></div><div class="line">hexo s --drafs <span class="comment">#强制发布草稿</span></div></pre></td></tr></table></figure>
<h3 id="hexo使用细节"><a href="#hexo使用细节" class="headerlink" title="hexo使用细节"></a>hexo使用细节</h3><hr>
<h4 id="开启评论、添加分类、标签格式"><a href="#开启评论、添加分类、标签格式" class="headerlink" title="开启评论、添加分类、标签格式"></a>开启评论、添加分类、标签格式</h4><ul>
<li>开启评论、添加分类和标签格式需要在scaffolds目录中修改相应的模板，如post.md，示例设置如下。</li>
<li>注意：设置完成后，对新建的文章才有效，新建完成后，用hexo generate生成文件时会创建categories目录，但是分类页面不会创建。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: &#123;&#123; title &#125;&#125;</div><div class="line">date: &#123;&#123; date &#125;&#125;</div><div class="line">updated: &#123;&#123; date &#125;&#125;</div><div class="line">comments: <span class="literal">true</span></div><div class="line">categories:</div><div class="line">tags:</div><div class="line">---</div></pre></td></tr></table></figure>
<h4 id="文章摘要"><a href="#文章摘要" class="headerlink" title="文章摘要"></a>文章摘要</h4><p>首页中的文章摘要可以在对应的md源文件中添加<code>&lt;!-- more --&gt;</code>，那么这一行的上部分会作为摘要显示在首页，查看详细内容会查看全文(含摘要)。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: 搭建博客站点</div><div class="line">date: 2016-08-06 14:08:36</div><div class="line">comments: <span class="literal">true</span></div><div class="line">categories: 我的博客</div><div class="line">tags: </div><div class="line">- blog</div><div class="line">- github pages</div><div class="line">- github</div><div class="line">- hexo</div><div class="line">---</div><div class="line">**说明：**介绍建立个人blog站点的主要流程，使用github pages以及hexo进行实现。</div><div class="line">&lt;!-- more --&gt;</div></pre></td></tr></table></figure>
<h4 id="设置网站中的分类、关于、标签对应的链接页面"><a href="#设置网站中的分类、关于、标签对应的链接页面" class="headerlink" title="设置网站中的分类、关于、标签对应的链接页面"></a>设置网站中的分类、关于、标签对应的链接页面</h4><ul>
<li>分类、关于、标签对应的目录下不会自动创建index.html，所以对应的链接会提示找不到。</li>
<li>需要创建相应的页面(page)，hexo会自动创建页面，运行命令如下。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">hexo n page <span class="string">"about"</span></div><div class="line">hexo n page <span class="string">"categories"</span></div><div class="line">hexo n page <span class="string">"tags"</span></div></pre></td></tr></table></figure>
<blockquote>
<p>tags页面(sources/tags/index.md)默认就好，但需要指明<code>type: &quot;tags&quot;</code>，hexo会自动生成标签云。<br>categories页面(sources/categories/index.md)默认就好，但需要指明<code>type: &quot;categories&quot;</code>，hexo会自动生成分类列表。<br>about页面(sources/about/index.md)需要自己编写内容。</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: tags</div><div class="line">date: 2016-08-08 19:32:59</div><div class="line">updated: 2016-08-08 19:32:59</div><div class="line"><span class="built_in">type</span>: <span class="string">"tags"</span></div><div class="line">categories:</div><div class="line">tags:</div><div class="line">comments: <span class="literal">false</span></div><div class="line">---</div></pre></td></tr></table></figure>
<h4 id="添加github的README"><a href="#添加github的README" class="headerlink" title="添加github的README"></a>添加github的README</h4><ul>
<li>由于README.md会被解析成html，所以可以把md后缀改为MDOWN，让hexo不解析，而github可以解析。</li>
</ul>
<h4 id="hexo删除文章"><a href="#hexo删除文章" class="headerlink" title="hexo删除文章"></a>hexo删除文章</h4><ul>
<li>删除文章可以通过直接删除source中对应的文件夹或者文件，使用<code>hexo clean</code>删除db缓存、文件缓存，重新发布即可，tags等也会自动更新。</li>
<li>hexo支持实时更新，源文件的增改删操作可以不用重启server。 </li>
</ul>
<h3 id="hexo高级配置"><a href="#hexo高级配置" class="headerlink" title="hexo高级配置"></a>hexo高级配置</h3><hr>
<h4 id="参考文章-1"><a href="#参考文章-1" class="headerlink" title="参考文章"></a>参考文章</h4><ul>
<li><a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="external">开始使用NexT</a></li>
<li><a href="http://www.lichanglin.cn/%E5%9C%A8hexo%E4%B8%AD%E5%8A%A0%E5%85%A5%E5%A4%9A%E8%AF%B4%E8%AF%84%E8%AE%BA/" target="_blank" rel="external">在hexo中加入多说评论</a></li>
<li><a href="http://ssk.91txh.com/209" target="_blank" rel="external">多说回复后显示浏览器及操作系统信息（Useragent）</a></li>
</ul>
<h4 id="主题修改"><a href="#主题修改" class="headerlink" title="主题修改"></a>主题修改</h4><ul>
<li>使用了参考文章中的NexT主题。</li>
</ul>
<h4 id="插件配置"><a href="#插件配置" class="headerlink" title="插件配置"></a>插件配置</h4><ul>
<li>创建多说评论网站，修改<code>themes/next/layout/_partials/comments.swig</code>内容如下。(多说评论在2017-06-01停止服务)</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">&#123;% <span class="keyword">if</span> page.comments %&#125;</div><div class="line">  &lt;div class=<span class="string">"comments"</span> id=<span class="string">"comments"</span>&gt;</div><div class="line">      	&lt;!-- 多说评论框 start --&gt;</div><div class="line">		&lt;div class=<span class="string">"ds-thread"</span> data-thread-key=<span class="string">"&#123;&#123; page.path &#125;&#125;"</span> data-url=<span class="string">"&#123;&#123; page.permalink &#125;&#125;"</span>&gt;&lt;/div&gt;</div><div class="line">		&lt;!-- 多说评论框 end --&gt;</div><div class="line">		&lt;!-- 多说公共JS代码 start (一个网页只需插入一次) --&gt;</div><div class="line">		&lt;script <span class="built_in">type</span>=<span class="string">"text/javascript"</span>&gt;</div><div class="line">			var duoshuoQuery = &#123;short_name:<span class="string">"这里是多说生成的名称"</span>&#125;;</div><div class="line">			(<span class="function"><span class="title">function</span></span>() &#123;</div><div class="line">				var ds = document.createElement(<span class="string">'script'</span>);</div><div class="line">				ds.type = <span class="string">'text/javascript'</span>;ds.async = <span class="literal">true</span>;</div><div class="line">				ds.src = (document.location.protocol == <span class="string">'https:'</span> ? <span class="string">'https:'</span> : <span class="string">'http:'</span>) + <span class="string">'//static.duoshuo.com/embed.js'</span>;</div><div class="line">				ds.charset = <span class="string">'UTF-8'</span>;</div><div class="line">				(document.getElementsByTagName(<span class="string">'head'</span>)[0] || document.getElementsByTagName(<span class="string">'body'</span>)[0]).appendChild(ds);</div><div class="line">			&#125;)();</div><div class="line">		&lt;/script&gt;</div><div class="line">		&lt;!-- 多说公共JS代码 end --&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&#123;% endif %&#125;</div></pre></td></tr></table></figure>
<ul>
<li>自定义多说评论的样式与头像<ul>
<li><strong>头像设置。</strong>头像存为<code>source/statics/images/avatar.png</code>，这个目录是我自己建的，hexo g的时候会生成<code>public/statics</code>，我用来存放图片、js等内容。头像的指定是在主题配置中设置<code>avatar: /statics/images/avatar.png</code>。</li>
<li><strong>多说评论显示userAgent信息(浏览器和OS信息)。</strong><ul>
<li>将多说的embed.js本地化，添加到主题中，可以按照<a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="external">开始使用NexT</a>文中的方式配置。我是直接修改<code>themes/next/layout/_partials/comments.swig</code>中的embed.js的链接，改成我的博客地址：<code>ds.src = (document.location.protocol == &#39;https:&#39; ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//bebetter.site/statics/js/embed.js&#39;;</code></li>
<li>再按照<a href="http://ssk.91txh.com/209" target="_blank" rel="external">多说回复后显示浏览器及操作系统信息（Useragent）</a>文中的描述，将js代码添加到embed.js，并把样式代码添加到<code>themes/next/source/css/_custom/custom.sty</code>中。</li>
<li>这时需要将statics目录及文件上传到github站点上，需要等几分钟才能请求到js等资源，这时候再评论的时候就可以看到浏览器信息和OS信息了。</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>注意：在embed.js本地化的过程中会遇到问题：hexo默认会将source下的所有文件都进行渲染，导致的问题就是README.md被渲染成html，embed.js被渲染改变了内容等问题。这时候可以修改hexo全局配置中的skip_render，以source为默认路径，如配置<code>skip_render:statics/**</code>。参考文章<a href="https://segmentfault.com/q/1010000003957602/a-1020000003957954" target="_blank" rel="external">Hexo编译文档时把JS给写乱了，请问怎么解决？</a>。</p>
</blockquote>
<h4 id="友情链接"><a href="#友情链接" class="headerlink" title="友情链接"></a>友情链接</h4><ul>
<li>修改next主题配置如下。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Blogrolls</span></div><div class="line">links_title: 友情链接</div><div class="line"><span class="comment">#links_layout: block</span></div><div class="line">links_layout: inline</div><div class="line">links:</div><div class="line">  <span class="comment">#Title: http://example.com/</span></div><div class="line">  my-github: https://github.com/gatewayzy</div><div class="line">  百度: http://baidu.com/</div></pre></td></tr></table></figure>
<h4 id="支持LaTex公式"><a href="#支持LaTex公式" class="headerlink" title="支持LaTex公式"></a>支持LaTex公式</h4><ul>
<li>开启next主题配置中的公式插件配置。</li>
<li>不同主题有相应的配置方式，默认主题landscape可参看文章：<a href="http://blog.csdn.net/sherlockzoom/article/details/43835613" target="_blank" rel="external">在hexo博客中使用Mathjax写LaTex数学公式</a></li>
<li>公式举例如下。更多公式请查看LaTex使用教程。</li>
<li>如果没有效果，应该确实是否是网络无法访问cdn.mathjax.org对应的js，建议开启全局代理模式以访问国外服务器。<ul>
<li>$ 表示行内公式：<code>$E=mc^2$</code>  $E=mc^2$</li>
<li>$$ 表示整行公式：<code>$$\sum_{i=1}^n a_i=0$$</code> $$\sum_{i=1}^n a_i=0$$</li>
<li><code>$$f(x_1,x_2,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2$$</code> $$f(x_1,x_2,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2$$</li>
<li><code>$$\alpha (x)=\sum_{m=0}^{m&lt;2^2} \alpha_2m +\mu$$</code> $$\alpha (x)=\sum_{m=0}^{m&lt;2^2} \alpha_2m +\mu$$</li>
<li><code>$$dudx|x=0$$</code> $$dudx|x=0$$</li>
<li><code>$$f(x,y,z)=3y2z(3+7x+51+y2)$$</code> $$f(x,y,z)=3y2z(3+7x+51+y2)$$</li>
<li><code>$$\mbox{对任意的$x&gt;0$}, \mbox{有 }f(x)&gt;0. $$</code>  $$\mbox{对任意的$x&gt;0$}, \mbox{有 }f(x)&gt;0. $$</li>
<li><code>$$\LaTeX \ast\TeX$$</code> $$\LaTeX \ast\TeX$$</li>
<li><code>$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$</code> $$x=\frac{-b\pm\sqrt[5]{b^2-4ac}}{2a}$$<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"># MathJax Support</div><div class="line">mathjax:</div><div class="line">  enable: true</div><div class="line">  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Blog/" rel="tag">#Blog</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/08/08/Blog/搭建个人博客站点2-托管到公网服务器/" rel="prev" title="搭建个人博客站点(2)-托管到公网服务器">
                搭建个人博客站点(2)-托管到公网服务器 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    


  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/statics/images/avatar.png"
               alt="gatewayzy" />
          <p class="site-author-name" itemprop="name">gatewayzy</p>
          <p class="site-description motion-element" itemprop="description">blog website with hexo and github pages</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">70</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">10</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">38</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              友情链接
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="https://github.com/gatewayzy" title="Github-gatewayzy" target="_blank">Github-gatewayzy</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://google.com/" title="Goolge" target="_blank">Goolge</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://wiki.jikexueyuan.com/" title="Wiki-jike" target="_blank">Wiki-jike</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#为什么建站"><span class="nav-number">1.</span> <span class="nav-text">为什么建站</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#搭建博客站点主要流程"><span class="nav-number">2.</span> <span class="nav-text">搭建博客站点主要流程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#域名"><span class="nav-number">2.1.</span> <span class="nav-text">域名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#服务器"><span class="nav-number">2.2.</span> <span class="nav-text">服务器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#域名解析"><span class="nav-number">2.3.</span> <span class="nav-text">域名解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建blog站点工程"><span class="nav-number">2.4.</span> <span class="nav-text">创建blog站点工程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#发布blog"><span class="nav-number">2.5.</span> <span class="nav-text">发布blog</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#开始建站"><span class="nav-number">3.</span> <span class="nav-text">开始建站</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#域名与域名解析"><span class="nav-number">3.1.</span> <span class="nav-text">域名与域名解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#github-github-pages-写博客"><span class="nav-number">4.</span> <span class="nav-text">github + github pages 写博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#创建github博客站点"><span class="nav-number">4.1.</span> <span class="nav-text">创建github博客站点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更新博客"><span class="nav-number">4.2.</span> <span class="nav-text">更新博客</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#github-hexo-写博客"><span class="nav-number">5.</span> <span class="nav-text">github + hexo 写博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#参考文章"><span class="nav-number">5.1.</span> <span class="nav-text">参考文章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装hexo"><span class="nav-number">5.2.</span> <span class="nav-text">安装hexo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用hexo建站"><span class="nav-number">5.3.</span> <span class="nav-text">使用hexo建站</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo工程目录结构"><span class="nav-number">5.4.</span> <span class="nav-text">hexo工程目录结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo-命令解析"><span class="nav-number">5.5.</span> <span class="nav-text">hexo 命令解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo常用命令"><span class="nav-number">5.6.</span> <span class="nav-text">hexo常用命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo使用细节"><span class="nav-number">5.7.</span> <span class="nav-text">hexo使用细节</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#开启评论、添加分类、标签格式"><span class="nav-number">5.7.1.</span> <span class="nav-text">开启评论、添加分类、标签格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#文章摘要"><span class="nav-number">5.7.2.</span> <span class="nav-text">文章摘要</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#设置网站中的分类、关于、标签对应的链接页面"><span class="nav-number">5.7.3.</span> <span class="nav-text">设置网站中的分类、关于、标签对应的链接页面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#添加github的README"><span class="nav-number">5.7.4.</span> <span class="nav-text">添加github的README</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo删除文章"><span class="nav-number">5.7.5.</span> <span class="nav-text">hexo删除文章</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo高级配置"><span class="nav-number">5.8.</span> <span class="nav-text">hexo高级配置</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#参考文章-1"><span class="nav-number">5.8.1.</span> <span class="nav-text">参考文章</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题修改"><span class="nav-number">5.8.2.</span> <span class="nav-text">主题修改</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#插件配置"><span class="nav-number">5.8.3.</span> <span class="nav-text">插件配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#友情链接"><span class="nav-number">5.8.4.</span> <span class="nav-text">友情链接</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#支持LaTex公式"><span class="nav-number">5.8.5.</span> <span class="nav-text">支持LaTex公式</span></a></li></ol></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">gatewayzy</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.1"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>



  



  




  
  

  
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
  </script>

  <script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for (i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
      }
    });
  </script>
  <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>



  

  
<script type="text/javascript" async src="//push.zhanzhang.baidu.com/push.js">
</script>


</body>
</html>
